<template>
  <div class="all_box">
    <!-- <ul>
      <li class="all_box_item">
        <p class="order_title flex-be-center "><span>订单号：20200325153001</span>
          <a>待付款</a>
        </p>
        <div class="order-box">
          <van-card num="2" price="2.00" desc="描述信息" title="商品标题" thumb="https://img.yzcdn.cn/vant/ipad.jpeg" />
        </div>
        <div class="flex-be-center order_time_box">
          <span>下单时间:<span>2020-03-25 15:37</span></span>
          <p class="order_time_box_btn">
            <a>取消订单</a>
            <a class="active">立即付款</a>
          </p>
        </div>
      </li>
      <li class="all_box_item">
        <p class="order_title flex-be-center "><span>订单号：20200325153001</span>
          <a>待付款</a>
        </p>
        <div class="order-box">
          <van-card num="2" price="2.00" desc="描述信息" title="商品标题" thumb="https://img.yzcdn.cn/vant/ipad.jpeg" />
        </div>
        <div class="flex-be-center order_time_box">
          <span>下单时间:<span>2020-03-25 15:37</span></span>
          <p class="order_box_btn">
            <a class="">取消订单</a>
            <a class="active">立即付款</a>
          </p>
        </div>
      </li>
    </ul> -->

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <ul class="list_box">
          <li class="all_box_item" v-for="(item,index) in list_box" :key="item.id">
            <p class="order_title flex-be-center "><span>订单号：{{item.order_sn}}</span>
              <!-- <a>{{item.status_nam}}</a> -->
              <a class="active">{{item.status_name}}</a>
            </p>
            <div class="order-box" @click="order_des(item.id)">
              <van-card :num="item.goods_num" :price="(item.money).toFixed(2)"  :title="item.goods_name" :thumb="item.goods_icon" >
                <template #desc><!-- :desc="item.attr_name" -->
                  <span style="margin-left: 0.2rem;line-height: 0.7rem;">
                    {{item.attr_name}}
                  </span>
                  <div>
                    <span style="margin-left: 0.2rem;">价格：</span><span style="color: rgba(216, 30, 6, 1);">￥{{item.goods_price}}</span>  <span style="margin-left: 0.2rem;">diy价格</span><span style="color: rgba(216, 30, 6, 1);">￥{{item.diy_price}}</span>
                  </div>
                </template>
              </van-card>
            </div>
            <div class="flex-be-center order_time_box">
              <span>下单时间:<span>{{item.create_time}}</span></span>
              <!-- <p class="order_box_btn" v-if="paraid==0">
                <a class="">全部</a>
                <a class="active">全部</a>
              </p> -->
              <!-- 代付款 -->
              <p class="order_box_btn" v-if="item.order_status==0">
                <a class="" @click="cancle(item)">取消</a>
                <a class="active">付款</a>
              </p>  
              <!-- 代发货 -->
              <p class="order_box_btn" v-if="item.order_status==2">
                <!-- <a class=""></a>
                <a class="active"></a> -->
              </p>
              <!-- 待收货 -->
              <p class="order_box_btn" v-if="item.order_status==2">
                <a class="">确认收货</a>
                <a class="active">查看物流</a>
              </p>
              <!-- 已完成 -->
              <p class="order_box_btn" v-if="item.order_status==3">
                <!-- <a class=""></a> -->
                <a class="active">立即评价</a>
              </p>
              <!-- 已取消 -->
              <p class="order_box_btn" v-if="item.order_status==5">
                <!-- <a class="">取消订单</a>
                <a class="active">{{item.status_name}}</a> -->
              </p>



            </div>
          </li>
        </ul>
      </van-list>
    </van-pull-refresh>

  </div>
</template>
<style lang="" scoped>
  .all_box_item {
    margin-bottom: 0.96rem;
  }

  .all_box {
    margin-top: 0.64rem;
  }

  .order_title {
    height: 0.28rem;
    font-size: 0.3rem;
    color: rgba(51, 51, 51, 1);
    margin-bottom: 0.64rem;
  }

  /* 订单号title */
  .order_title a {
    color: #D81E06;
  }

  .order-box {
    margin-bottom: 0.65rem;
  }

  /* 下单时间 */
  .order_time_box {
    font-size: 0.24rem;
    color: rgba(51, 51, 51, 1);
  }
</style>
<script>
  import { Toast } from "vant";
  import getData from '@/assets/js/axios.js'
  import store from '@/store'
  export default {
    props:["para"],
    data() {
      return {
        // 无限滚动数据
        loading: false,
        finished: false,
        refreshing: false,
        alllist: '',
        id: null,
        page: 1,
        list_box: [],
        order_status:'',
        paraid:"",
        type:1, 
      }
    },
    watch: {
      $route() {
        this.paraid = this.$route.query.id;
        this.list_box = []
        this.page = 1
        this.onLoad()
        // console.log(this.para,666363636111111111111)
			}
    },
    mounted() {
      this.paraid = this.$route.query.id;
     // this.order_status=this.$route.query.id;
      //var id=this.$route.query.id;
     // console.log(this.order_status,666);
     // console.log(this.para,"这是传参的")
     //var id=this.$route.query.id;
      //console.log(id,this.active);
      // switch(id){
      //   case "all":
      //       //this.active=0;
      //       //this.prevactive=0;
      //       this.paraid="all";
      //       break;
      //   case '0':
      //       //this.active=1;
      //       //this. prevactive=1;
      //       this.paraid=0;
      //       break;
      //   case '1':
      //      // this.active=2;
      //      // this. prevactive=2;
      //      this.paraid=1;
      //       //console.log(this.active,3636);
      //       break;
      //   case '2':
      //      //this.active=3;
      //      //this. prevactive=3;
      //      this.paraid=2;
      //       break;
      //   case '3':
      //       //this.active=4;
      //       //this. prevactive=4;
      //       this.paraid=3;
      //       break;
      //   case '4':
      //       //this.active=5;
      //       //this. prevactive=5;
      //       this.paraid=4;
      //       break;
      //   default:
      //       break;

      // };
   
    },
        // 下拉刷新
    methods: {
      
      onLoad() {
        console.log("12121212")
        // if(this.para.flag){
        //   onRefresh() ;
        //   console.log(this.para.id,"这是id") 
        // };

        if (this.refreshing) {
          this.list_box = [];
          this.refreshing = false;
        }
        //console.log(this.para, "向下拉了1111111111");
      var para = {
        page: this.page,
        order_status: this.paraid
      };
        //console.log(this.page,"页数")   
          getData.Odi(para).then(res => {         
            console.log(res,"每次数量量")
            res.data.data.data.map(item=>{
              item.goods_price = Number(item.goods_price).toFixed(2)
            })
            this.list_box.push(...res.data.data.data);
            //console.log(this.list_box,3636);
            this.page++;
            this.loading =false;
            //console.log(res,this.page, "下拉刷新的")
            //console.log(this.list_box,3636);
            if (this.list_box.length >=res.data.data.total) {
            this.finished = true;
            //console.log(this.list_box,"总量")
          }
          }).catch(err => {


          })
      },

      // 加载失败调用方法
      onRefresh() {
        console.log("失败了")
        this.finished = false; 		// 清空列表数据
        this.loading = true; 			// 将 loading 设置为 true，表示处于加载状态
        this.page = 1;				// 分页数赋值为1
        this.list_box = [];				// 清空数组
        this.onLoad(); 				// 重新加载数据
      },
      navto(a) {
        //this.$router.push('/goods?id=' + a)
      },
      order_des(a){
        // console.log(a,"aaaaaaaaaaaaaaaa")
        this.$router.push('/orderdes?id=' + a)
      },
      //取消订单
      cancle(item){
        let pramas = {
          id:item.id,
          cancel_reason:'none'
        }
        getData.odCod(pramas).then(res=>{
          console.log(res,"res")
          Toast('操作成功!');
          this.page = 1;				// 分页数赋值为1
          this.list_box = [];				// 清空数组
          this.onLoad(); 				// 重新加载数据

        }).catch(err=>{

        })
        
      }
    },

  
  
  
  
  }




</script>